<template>
	<view class="container">	
		<view style="position: absolute;z-index: 1;width: 100%;">
			<diy-nav title="夜校" :bgColor="statusBgColor" :bgColor2="statusBgColor" :backIcon="false" ></diy-nav>
		</view>
		<view class="header" :style="{top:screenHeight}">	
			<uni-search-bar class="uni-mt-10" radius="0" :placeholder="_place" clearButton="none" :value="searchVal" cancelButton="auto" @cancel="cancelSearch"  @confirm="confirmSearch" />
		</view>
		<view >
			<map class="mapV" @regionchange="regionchange" show-location="true" :polyline="_polyline" @labeltap="clickMarker"  :latitude="myPos.latitude" :longitude="myPos.longitude"  :scale=scale :markers="markers">
			</map>
		</view>
		<view v-if="show_box" class="bottom_box">
			
			<view style="display: flex; margin: 20rpx 30rpx; align-items: center;">
				<view style="font-size: 32rpx; font-weight: 600">{{info.name}}</view>
				<view class="sug">{{tag_str}}</view>
			</view>
			<view style="font-size: 28rpx;margin: 20rpx 30rpx;">{{info.address}}</view>
			
			<view  v-if="!show_img" style="margin-top: 34rpx;">
				<scroll-view class="scroll-box" scroll-x="true">
						<view class="course_v" v-for="(item, index) in course_list" :key="index">
							<image class="course_img" mode="aspectFill" :src="item.discover"></image>
							<text class="cell-icon yticon icon-player player_btn" @click="toCourse(item.id)"></text>
						</view>
				</scroll-view>
				
			</view>
			<view v-else style="margin-top: 34rpx;">
				<scroll-view class="scroll-box" scroll-x="true">
						
						<view  class="list_v" @click="clickImg(index)" v-for="(item, index) in line_pic_arr" :key="index">
							<image class="list_img" :class="{current:current_line_pic_index==index}" mode="aspectFill" :src="item"></image>
						</view>
				</scroll-view>
				
			</view>
		
		</view>
		<view v-if="show_box" class="box_btn">
			<view class="map_btn" @click="viewLine(1)">查看路线</view>
			<view class="map_btn" @click="viewLine(2)">查看教室</view>
		</view>
		<view v-if="show_img" >
			<view class="privacy">
				<text v-if="show_left_icon" class="cell-icon yticon icon-zuo left-icon" @click="preImg()"></text>
				<view class="privacy-content">
					<image style="width: 600rpx;height: 800rpx;border-radius: 40rpx;" :src="line_pic_arr[current_line_pic_index]"></image>
				</view>
				<text v-if="show_right_icon" class="cell-icon yticon icon-you right-icon" @click="nextImg()"></text>
			</view>
			<view class="close_circle close" @click="closeImage()"></view>
		</view>
		
		<!-- 底部弹出层 -->
		<view v-if="show_bottom" class="bottom-btn" :style="{bottom:ex_height+'rpx'}"  @click="expandBottomList()">
			<view style="height: 8rpx;background: #000;border-radius: 20rpx;margin: 10rpx auto"></view>
		</view>
		<view v-if="show_bottom" class="bottom-list" :style="{height:bottom_height+'rpx'}">
			<view style="display: flex;align-items: center;">
				<view class="campus-total">共{{total}}个校区</view>	
				<!-- <view class="select_tag">
					<uni-data-select v-model="value" :clear="false" :placeholder="_selectPlace" :localdata="range"></uni-data-select>
				</view> -->
			</view>
			
			<view>
				<scroll-view style="height: 560rpx" scroll-y @scrolltolower="campusList"	>
					<view v-for="(item,index) in campust_list" :key="index"  class="bottom-campus-list">
						<view style="font-size: 32rpx;font-weight: 600" @click="clickCampus(item.id)">{{item.name}}</view>
						<view style="font-size: 28rpx;margin-top: 20rpx;" @click="clickCampus(item.id)">{{item.address}}</view>
						<view class="enroll-info">
							<view class="enroll-child" @click="clickCampus(item.id)">{{item.course_can_enroll_many_count?item.course_can_enroll_many_count:0}}个课程可报名</view>
							<view class="enroll-child margin-l-20" @click="clickCampus(item.id)">{{item.course_many_count?item.course_many_count:0}}个课程可查看</view>
							<view class="enroll-child margin-l-20" @click="callMobile(item.contact)"><text class="cell-icon yticon icon-phone" style="width: 30rpx !important;height: 30rpx"></text>{{item.linkman}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'  
	import Api from '@/common/api';
	import DiyNav from "@/components/diy-nav-back"
	export default {
		components: {
			DiyNav
		},
		data() {
			return {
					statusBgColor:'transparent',
					tag_str:'推荐课程',
					ex_flag:false,
					bottom_height:670,
					ex_height:670,
					total:0,
					show_bottom:false,
					page:1,
					size:3,
					more_data:true,
					scale:14,
					_place:'请输入你感兴趣的校区',
					
					searchVal:'',
					value: '',
				    range: [],
					_selectPlace:'按类型筛选',
					
					// 我的定位经纬度信息
					myPos: {
						latitude: '',
						longitude: '',
					},
					
					markers: [],
					show_box:false,
					campust_list:[],
					course_list:[],
					show_img:false,
					line_pic_arr:[],
					current_line_pic_index:0,
					campus_id:0,
					show_right_icon:true,
					show_left_icon:false,
					_polyline:[],
					info:{},
					flag:true
					
				}
		},
		
		onLoad() {
			// this.getMapLine();
			// 获取当前位置
			
			// this._getlocation();
			let loc = uni.getStorageSync('loc');
			if(loc!=''){
				this.myPos.latitude=loc.lat;
				this.myPos.longitude=loc.lng;
				this.campusList();
				this.campusMarkerList();
				return;
			}
			
		},
		beforeCreate(){
				
		},
		beforeDestroy(){
			
			
		},
		computed: {
			...mapState(['hasLogin','userInfo','user_role']),
			screenHeight: function() {
				    // return (uni.getSystemInfoSync().statusBarHeight+uni.getMenuButtonBoundingClientRect().height)*2+'rpx';
			}  
			
		},
		onShow(){
			
			
			// this.searchCampulTypeList();
			
		},
		onReady(){
			
		},
		onPageScroll(e){
			
		},
		methods: {
			callMobile(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			regionchange(e){
				let templat =this.myPos.latitude;
				let templng = this.myPos.longitude;
				if(e.type=='end'&&this.flag){
					let lat =e.target.centerLocation.latitude;
					let lng =e.target.centerLocation.longitude;
					if(lat==0||lng==0||lat==templat||lng==templng){
						return;
					}
					this.myPos.latitude=lat;
					this.myPos.longitude=lng;
					this.flag=false;
					this.markers=[];
					this.campusMarkerList();
				}
				
			},
			expandBottomList(){
				console.log('expand')
				this.ex_flag =!this.ex_flag;
				this.bottom_height=this.ex_flag?300:670;
				this.ex_height=this.ex_flag?300:670;
			},
			cancelSearch(){
				this.searchVal=''
				this.campusMarkerList();
				this.campust_list=[];
				this.more_data=true;
				this.page=1;
				this.show_bottom=false;
				this.campusList()
			},
			confirmSearch(e){
				// this.searchVal=e;
				this.searchVal=e.value;
				this.campusMarkerList();
				this.campust_list=[];
				this.more_data=true;
				this.page=1;
				this.show_bottom=false;
				this.campusList()
			},
			toCourse(id){
				uni.navigateTo({
					url:'/pages/course/detail?id='+id
				})
			},
			
			_getlocation() {
				let loc = uni.getStorageSync('loc');
				if(loc!=''){
					this.myPos.latitude=loc.lat;
					this.myPos.longitude=loc.lng;
					this.campusList();
					this.campusMarkerList();
					return;
				}
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						that.myPos = res;
						that.page=1;
						that.more_data=true;
						that.campusList();//定位后再加载一次
						that.campusMarkerList();//定位后再加载一次
					},
					fail:function(error){
						uni.showModal({
							title:`提示`,
							content:`为了更好的体验，请前往【微信-设置-隐私-授权管理】中开启对该小程序的位置信息授权`,
							complete:function(){
								uni.openSetting({
									success:function(res){
										// console.log(res,111)
										that._getlocation()
									},
									
								})
							}
						})
					}
				});
				
			},
			async campusMarkerList(){
				
				let params ={key_word:this.searchVal,lat:this.myPos.latitude,lng:this.myPos.longitude}
				let data = await Api.apiCall('get',Api.apiName.campus_marker_list,params,true);
				if(!data){
					return;
				}
				this.markers=data.data;
				this.flag=true;
			},
			async campusList(){
				
				if(!this.more_data){
					return;//没有数据不请求
				}
				
				let params = {page:this.page,size:this.size,key_word:this.searchVal,lat:this.myPos.latitude,lng:this.myPos.longitude};
				let data = await Api.apiCall('get',Api.apiName.campus_lists,params,true);
				if(!data){//出错时
					return;
				}
				this.show_bottom=true;		
				this.campust_list=this.campust_list.concat(data.data.list)
				this.total = data.data.total;
				//判断是否还有数据， 有改为 more， 没有改为noMore
				if(data.data.list.length>0&&data.data.list.length==this.size){
					this.page++;
				}else{
					this.more_data=false;
				
				}	
				
			},
			async searchCampulTypeList(){
				let data = await Api.apiCall('get',Api.apiName.search_campus_type,{},true,false);
				if(!data){
					return;
				}
				this.range=data.data;
			},
			clickMarker(e){
				let _campus_id = e.detail.markerId.toString();
				this.campus_id = _campus_id.substring(4);
				// this.campusCourseList();
				// this.show_bottom=false;
				// this.tag_str='推荐课程'
				uni.navigateTo({
					url:'/pages/campus/detail?id='+this.campus_id
				})
			},
			clickCampus(id){
				// this.campus_id = id;
				// this.campusCourseList();
				// this.show_bottom=false;
				// this.tag_str='推荐课程'
				uni.navigateTo({
					url:'/pages/campus/detail?id='+id
				})
			},
			async campusCourseList(){
				let params ={campus_id:this.campus_id,is_sug:1,size:100};
				let data = await Api.apiCall('get',Api.apiName.campus_course_list,params,true);
				if(!data||data.data.list.length==0){
					this.show_box=false;
					return;
				}
				this.myPos.latitude=data.data.campus_info.latitude;
				this.myPos.longitude=data.data.campus_info.longitude;
				this.scale=17;
				this.show_box=true;
				this.course_list=data.data.list;
				this.info = data.data.campus_info;
				// this.line_pic_arr=data.data.line_pics;
			},
			closeImage(){
				this.show_img=false;
			},
			async viewLine(type=1){
				
				if(!this.info.line_pics && type==1){
					this.$api.msg(`暂无导航图片`)
					return;
				}
				if(!this.info.room_pics && type==2){
					this.$api.msg(`暂无教室图片`)
					return;
				}
				// this.show_box=false;
				this.show_img=true;
				this.current_line_pic_index=0;
				if(type==1){
					this.line_pic_arr = this.info.line_pics;
					this.tag_str = '查看路线'
				}else{
					this.line_pic_arr = this.info.room_pics;
					this.tag_str='查看教室'
				}
				
				this.show_right_icon=true;
				this.show_left_icon=false;
			},
			nextImg(){
				this.show_left_icon=false;
				this.show_right_icon=false;
				let len = this.line_pic_arr.length;				
				if(this.current_line_pic_index<len-1){
					this.current_line_pic_index++;
				}
				if(this.current_line_pic_index<len-1){
					this.show_right_icon=true;	
				}
				if(this.current_line_pic_index>0){
					this.show_left_icon=true;
				}
				return;
			},
			preImg(){
				this.show_left_icon=false;
				this.show_right_icon=false;
				let len = this.line_pic_arr.length;
				if(this.current_line_pic_index>0){
					this.current_line_pic_index--;
				}
				if(this.current_line_pic_index>0){
					this.show_left_icon=true;
				}
				if(this.current_line_pic_index<len-1){
					this.show_right_icon=true;
				}
				
			},
			clickImg(index){
				let len = this.line_pic_arr.length;
				this.current_line_pic_index =index;
				if(index==0){
					this.show_left_icon=false;
					if(len>1){
						this.show_right_icon=true;
					}
				}
				if(index==len-1){
					this.show_right_icon=false;
					if(len>1){
						this.show_left_icon=true;
					}
				}
			},
			async getMapLine(){
				let data = await Api.apiCall('get',Api.apiName.map_line,{},true,false);
				if(!data){
					return;
				}
				this._polyline=data.data;
				console.log('mapline')
			},
		},
	

	}
</script>

<style lang="scss">	

	page {
		// background: #000;
		
	}
	.container{
		height:100vh;
		display: flex;
		overflow-y: hidden;
	}
	.header{
		position: absolute;
		top: 65px;
		left: 0px;
		right: 0px;
		z-index: 1;
	}
		
	.mapV {
		width: calc(100vw);
		height: 100vh;    
	}
	.bottom_box{
		height: 382rpx;
		// border:1px solid red;
		z-index:22;
		width: 100%;
		bottom: 0rpx;
		position: fixed;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}
	.course_v{
		width: 160rpx;
		height: 202rpx;
		margin-left: 20rpx;
		display: inline-flex;
		/* item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 */
		flex-direction: column-reverse;
		align-items: center;
		// background-color: red;
		// border: 1px solid red;
		color: white;
		font-size: 12px;
}
	.course_img{
		width: 160rpx;
		height: 202rpx;
		border-radius: 24rpx;
		display: table;
	}
	.list_v{
			width: 160rpx;
			height: 202rpx;
			margin-left: 20rpx;
			display: inline-flex;
			/* item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 */
			flex-direction: column-reverse;
			align-items: center;
			// background-color: red;
			// border: 1px solid red;
			color: white;
			font-size: 12px;
	}
	.list_img{
		width: 160rpx;
		height: 202rpx;
		border-radius: 24rpx;
		display: table;
		&.current{
			border: 4rpx solid #4CADDB;
		}
	}
	.scroll-box{
		white-space: nowrap
	}
	.box_btn{
		
		height: 218rpx;
		width: 280rpx;
		position: absolute;
	    top: 66%;
	    left:50%;
	    transform: translate(-50%,-50%);
	}
	.map_btn{
		width: 100px;
		height: 50rpx;
		background-color: #90bbda;
		position: relative;
		left: 50%;
		top: 30rpx;
		-webkit-transform: translate(-50%, -50%);
		text-align: center;
		border-radius: 10rpx;
		margin-top: 14rpx;
		font-size: 12px;
		font-weight: 800;
		line-height: 50rpx;
		color: #fff;
	}
	.privacy{
		width: 600rpx;
		height: 800rpx;
		// border: 1px solid red;
		margin: auto;
		position: absolute;
		top: 194rpx;
		left: 40rpx;
		right: 40rpx;
		border-radius: 40rpx;
		
		z-index: 1;
	}
	
	.privacy-content{
		height: 800rpx;
		
	}
	.close_circle{
		position: fixed;
		top: 1009rpx;
		left: 20px;
		right: 20px;
		margin: auto;
		height: 60rpx;
		width: 60rpx;
		border: 1px solid #90bbda;
		color:#90bbda;
		text-align: center;
		border-radius: 50%;
		z-index:1;
		font-size: 12px;
		line-height: 60rpx;
	}
	.close::before{
		content: "\2716";
	}
	.left-icon{
		position: absolute;
		top: 50%;
		left: 20rpx;
		border: 1px solid #90bbda;
		border-radius: 50%;
		height: 60rpx;
		width: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color:#90bbda
	}
	.right-icon{
		position: absolute;
		top: 50%;
		right: 20rpx;
		border: 1px solid #90bbda;
		border-radius: 50%;
		height: 60rpx;
		width: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: #90bbda;
	}
	.player_btn{
		position: absolute;
		z-index: 2;
		top: 72rpx;
	}
	.bottom-btn{
		height: 30rpx;
		
		width: 150rpx;
		position: absolute;
		// bottom: 600rpx;
		left: 20rpx;
		right: 20rpx;
		margin: auto;
		
	}
	.bottom-list{
		// height: 600rpx;
		// border: 1px solid red;
		position: absolute;
		bottom: 0rpx;
		width: 100%;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background: #FFFFFF
	}
	.campus-total{
		height: 60rpx;
		line-height: 60rpx;
		width: 100%;
		margin-top: 20rpx;
		margin-left: 40rpx;
		font-size: 24rpx;
		font-weight: 600;
	}
	.bottom-campus-list{
		display: flex;
		flex-direction: column;
		margin-left: 40rpx;
		margin-top: 40rpx;
	}
	.enroll-info{
		display: flex;
		margin-top: 20rpx;
	}
	.enroll-child{
		background: #EEEEEE;
		padding: 0rpx 20rpx;
		border-radius: 10rpx;
		font-size: 22rpx;
		display: flex;
		align-items: center;
		height: 40rpx;
	}
	.margin-l-20{
		margin-left: 40rpx;
	}
	.sug{
		margin-left: 20rpx; 
		background: rgba(1,145,255,0.2);
		padding: 10rpx 30rpx; 
		border-radius: 20rpx; 
		font-size: 26rpx; 
		font-weight: 600;
		color: #0191FF;
	}
	.select_tag{
		width: 150px;
		height: 66rpx;
		display: flex;
		margin-right: 12rpx;
		border-radius: 20rpx;
	}
	.uni-select{
		width: 160rpx !important;
		height: 66rpx !important;
		border:none !important;
	}
	.uni-select__input-placeholder {
		color:#9e9c9c !important;
	}
	.uni-select__selector{
		top:calc(100%) !important;
	}
	.uni-searchbar__cancel{
		padding-right:20rpx;
		background:#F8F8F8
	}
</style>
